<template>
    <div class="main">
        <div>
            我的追漫
        </div>
        <div>
            <div class="my-detail-recommend-card" v-for="item in this.collectInfoList" :key="item"> 
                <div>
                    <el-image :src="agentPicture(item.picture,item.referer)">
                        <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                    </el-image>
                </div>
                <div>
                    <div>
                        <span>{{item.title | ellipsis}}</span>
                        <!-- <div>
                            <span>类型: </span><span> 热血{{item}}</span>
                        </div> -->
                    </div>
                    <div class="my_button">
                        <el-button plain size="small" @click="routerPushSearch(item.jumpurl,item.spiderId)">开始阅读</el-button> 
                        <el-button plain size="small" @click="deleteOperationControllerCancelCollectComicResource(item.id)">取消订阅</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LogoSrc from '@/assets/icon/comic.png'
import Api from '@/api/index';

export default {
  name: 'Collect',
  data () {
    return {
        logo: LogoSrc,
        //基本信息
        base:{
            userId: this.$store.state.common.userId,
            avatar: this.$store.state.common.avatar, 
        },
        //收藏漫画列表
        collectInfoList: [],
    }
  },
  methods: {
      //图片代理
      agentPicture(url,referer){
          let agentUrl = Api.APIROOT + '/agentController/forwardPicture?url=' + url + '&referer=' + referer
          return agentUrl
      },
      //跳转页面
      //点击跳转界面
      routerPushSearch(url,pyId){
          let newWindow = this.$router.resolve({path: '/detail/' + pyId,
                            query: {
                                    url: url
                                 }
          })
          window.open(newWindow.href,'_blank')
      },
      //取消订阅接口
      deleteOperationControllerCancelCollectComicResource(id){
          Api.getOperationControllerCancelCollectComicResource(id).then(response => {
               if(response.data.code == 200){
                    this.$router.go(0)
                    this.$notify({
                        title: '提示',
                        message: "已取消订阅",
                        position: 'bottom-left',
                        type: 'success'
                    });
               }
          },error => {
            //获取搜索内容
            this.$notify({
                  title: '提示',
                  message: '取消订阅失败',
                  position: 'bottom-left',
                  type: 'error'
              });
        })
      }
  },
  mounted() {
      //初始化,获取用户的收藏漫画
      Api.getMainPageControllerCoCollectInfoListByUserResource(this.base.userId).then(response => {
          if(response.data.code == 200){
            this.collectInfoList = response.data.data
          }
      })
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
    ellipsis2(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    }
  },
}
</script>

<style scoped>
.main{
    display: flex;
    flex-direction: column;
    /* justify-content: flex-start; */
    align-items: flex-start;
}
.el-avatar{
    box-shadow: 0px 0px 5px 1px rgb(223, 223, 223);
}
.main > div:nth-child(1){
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.6em;
    margin: 0px 0px 30px 0px;
    font-weight: 1000;
}
.main > div:nth-child(2){
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* align-items: flex-start; */
}
.my-detail-recommend-card{
    margin-top: 16px;
    width: 261px;
    height: 120px;
    display: flex;
    flex-direction: row;
    padding: 4px 0px 4px 0px;
}
.my-detail-recommend-card > div:first-child .el-image {
    width: 80px;
    height: 106px;
}
.my-detail-recommend-card > div:nth-child(2){
    width: 181px;
    height: 106px;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}  
.my_button{
    width: 90%;
    display: flex;
    flex-direction: row;
    /* padding: 0px 20px 0px 0px; */
    /* margin: 0px 40px 0px 0px; */
}
.my_button > .el-button{
    width: 50%;
}
/* .my-detail-recommend-card > div:nth-child(2) > span:first-child{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 1em;
}  */
</style>